<template>
  <div class="index">
    <div class="content">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
    </div>
    <ul class="tabBar">
      <router-link tag="li" :to="{name:'Movie'}" active-class="linkActive">
        <span class="iconfont icon-dianying"></span>
        影片
      </router-link>
      <router-link tag="li" :to="{name:'Cinema'}" active-class="linkActive">
        <span class="iconfont icon-yingyuana"></span>
        影院
      </router-link>
      <router-link tag="li" :to="{name:'BoxOffice'}" active-class="linkActive">
        <span class="iconfont icon-ranking"></span>
        票房
      </router-link>
      <router-link tag="li" :to="{name:'My'}" active-class="linkActive">
        <span class="iconfont icon-wode"></span>
        我的
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Index"
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content{
      flex: 1;
      overflow: auto;
  }
  .tabBar {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    background-color: white;
    height: 1.1rem;
      border-top: 1px solid #ececec;
      box-sizing: border-box;
    > li {
      height:100%;
      display: flex;
      flex-direction: column;
      width: 1.1rem;
      font-size: 0.24rem;
      align-items: center;
      span.iconfont {
        font-size: 0.64rem;
      }
    }
  }
}

.linkActive{
  color: rgb(0, 122, 255);
}
</style>